<template>
	<view class="middle" @click="bofang">
		<view class="smallmiddle">
			<view class="cd">
				<view class="smallcd play" :class="{pause:ispause}">
					<image :src="nowfengmian"></image>
				</view>
			</view>
		</view>
		<image class="img" src="../../static/zhanting1.png" v-show="show"></image>
	</view>
</template>

<script>
	export default {
		props:['nowfengmian'],
		data() {
			return {
				ispause:true,
				show:true
			}
		},
		methods:{
			bofang(){
				this.ispause = !this.ispause
				this.show = !this.show
				this.$emit('bofang')
			}
		}
	}
</script>

<style lang="scss">
	.middle{
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		//position: fixed;
		width: 100%;
		top: 260rpx;
		bottom: 340rpx;
		white-space: nowrap;
		font-size: 0;
		//background-color: red;
		.smallmiddle{
			display: inline-block;
			vertical-align: top;
			position: relative;
			width: 100%;
			height: 0;
			padding-top: 80%;
			//background-color: yellow;
			.cd{
				position: absolute;
				left: 10%;
				top: 16%;
				width: 80%;
				height: 100%;
				//background-color: green;
				.smallcd{
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					border: 30rpx solid hsla(0,0%,100%,.1);
					border-radius: 50%;
					//background-color: pink;
					image{
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						border-radius: 50%;    
					}
				}
				.play{
					animation: App-logo-spin infinite 20s linear;
					transform: rotate(360deg);
				}
				@keyframes App-logo-spin {
				  from { transform: rotate(0deg); }
				  to { transform: rotate(360deg); }
				}
				.pause{
					animation-play-state: paused;
				}
			}
		}
		.img{
			position: absolute;
			left: 320rpx;
			top:440rpx;
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%; 
		}
	}
</style>
